<template>
  <div id="box">
    <div id="left"></div>
    <div id="resize"></div>
    <div id="right"></div>
  </div>
</template>
<script>
export default {
  mounted(){

      var resize = document.getElementById("resize");
      var left = document.getElementById("left");
      var right = document.getElementById("right");
      var box = document.getElementById("box");
      resize.onmousedown = function(e){
        var startX = e.clientX;
        resize.left = resize.offsetLeft;
        document.onmousemove = function(e){
          var endX = e.clientX;

          var moveLen = resize.left + (endX - startX);
          var maxT = box.clientWidth - resize.offsetWidth;
          if(moveLen<150) moveLen = 150;
          if(moveLen>maxT-150) moveLen = maxT-150;

          resize.style.left = moveLen;
          left.style.width = moveLen + "px";
          right.style.width = (box.clientWidth - moveLen - 5) + "px";
        }
        document.onmouseup = function(evt){
          document.onmousemove = null;
          document.onmouseup = null;
          resize.releaseCapture && resize.releaseCapture();
        }
        resize.setCapture && resize.setCapture();
        return false;
      }

  }
}
</script>
<style scoped lang="scss">

#box{
  width:600px;
  height:500px;
  overflow:hidden;
}
#left{
  width:calc(30% - 5px);
  height:100%;
  background:skyblue;
  float:left;
}

#resize{
  width:5px;
  height:100%;
  cursor: w-resize;
  float:left;
}

#right{
  float:right;
  width:70%;
  height:100%;
  background:tomato;
}
</style>